Skip to main content

Module Aliases

Catalyst supports module aliases to create shorter and more descriptive import paths for modules. This practice can make the codebase cleaner and more maintainable. Some module aliases come pre-configured when setting up Catalyst, making imports cleaner.

Interactive Module Aliases Demo​

Module Aliases

This demo shows how to use module aliases in Catalyst to create cleaner and more maintainable import paths.

Module Alias Benefits

🎯 Cleaner Imports

Shorter, more descriptive import paths that are easier to read

🔧 Easier Refactoring

Move files around without breaking import paths throughout your codebase

⚡ Better DX

Improved developer experience with autocomplete and easier navigation

Select Alias Type

Import Comparison

Without Aliases

import Home from '../../../containers/Home/Home'
→

With Aliases

import Home from '@containers/Home/Home'

Description: Import containers and page components

Configuration

Add the _moduleAliases key to your package.json file:

package.json Configuration

{
  "_moduleAliases": {
    "@api": "api.js",
    "@containers": "src/js/containers",
    "@components": "src/js/components",
    "@server": "server",
    "@config": "config",
    "@css": "src/static/css",
    "@routes": "src/js/routes/",
    "@store": "src/js/store/index.js"
  }
}

Common Usage Examples

Usage Examples

// Import page components
import Home from '@containers/Home/Home'
import Products from '@containers/Products/Products'

// Import UI components
import Button from '@components/Button'
import Modal from '@components/Modal'

// Import Redux store
import store from '@store'
import { fetchProducts } from '@store/actions'

// Import stylesheets
import styles from '@css/base/styles.scss'
import variables from '@css/resources/_variables.scss'

Containers

// Import page components
import Home from '@containers/Home/Home'
import Products from '@containers/Products/Products'

Components

// Import UI components
import Button from '@components/Button'
import Modal from '@components/Modal'

Store

// Import Redux store
import store from '@store'
import { fetchProducts } from '@store/actions'

Styles

// Import stylesheets
import styles from '@css/base/styles.scss'
import variables from '@css/resources/_variables.scss'